<template>
  <nav>
    <div>{{$store.state.username}}</div>
    <div>{{$store.getters['updatename']}}</div>
    <button @click="mutationsFn">领取</button>
    <button>领取</button>
  </nav>
  <router-view />
</template>

<script>
// 拿到仓库数据
import { useStore } from 'vuex'

export default {
  name: 'app',
  setup () {
    // 使用vuex仓库
    const store = useStore()
    // 1. 使用根模块state的数据
    const mutationsFn = () => {
      // 3. 提交根模块mutations函数
      // store.commit('updateName')
      // 4. 调用根模块actions函数
      store.dispatch('updateName')
    }
    return { mutationsFn }
  }
}

</script>
